<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../css/special/imageview.css" />
		<style type="text/css">
			.mui-content {
				padding-bottom: 40px;
			}
			
			.img>img {
				width: 100%;
				vertical-align: middle;
			}
			
			.shop_data {
				font-size: 12px;
				margin-bottom: 10px;
			}
			
			.shop_data>div {
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				word-break: break-all;
				background: #fff;
				border-bottom: 1px solid #eee;
			}
			
			.shop_data>div>div:first-child {
				min-width: 100px;
				text-align: center;
				background: #f5f5f5;
				padding: 4px 0;
			}
			
			.shop_data>div>div:last-child {
				padding: 4px 0 4px 20px;
			}
			
			.price {
				color: #e12a35;
			}
			
			.integral>div {
				background: #e12a35;
				text-align: center;
				color: #fff;
				padding: 0 6px;
				border-radius: 50%;
			}
			
			.num>div {
				display: inline-block;
				vertical-align: middle;
				width: 30px;
				text-align: center;
			}
			
			.shop_data .num {
				padding-left: 10px !important;
			}
			
			.num>div>div {
				width: 12px;
				height: 12px;
				margin: 3px auto;
				line-height: 12px;
				border: 1px solid #ccc;
			}
			
			.num .input {
				width: 18%;
				font-size: 0;
				border: 0;
			}
			
			.input>input {
				text-align: center;
				padding: 0;
				margin: 0;
				width: 100%;
				height: 20px;
				font-size: 12px;
				vertical-align: middle;
				line-height: 20px;
			}
			/*商品详情*/
			
			.shop_details {
				background: #fff;
			}
			
			.shop_details>.shop_details_title {
				text-align: center;
				padding: 6px 0;
			}
			
			.shop_details>div {
				border-bottom: 1px solid #eee;
			}
			
			.shop_details>.shop_details_list {
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;
				color: #666666;
			}
			
			.shop_details_list>div {
				-webkit-flex: 1;
				flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-flex: 1;
				word-break: break-all;
				padding: 2px 10px;
			}
			
			.shop_details_list>div:first-child {
				text-align: right;
				background: #f5f5f5;
			}
			
			.footer {
				position: fixed;
				z-index: 800;
				top: calc(100vh - 40px);
				width: 100%;
			}
			
			.footer>button {
				width: 100%;
				border-radius: 0;
				height: 40px;
				background: #da2332;
				border-color: #da2332;
			}
			
			.prodDesc {
				width: 100%;
				overflow: hidden;
			}
			
			.prodDesc>img {
				width: 100%;
				vertical-align: middle;
			}
			/*确定兑换弹框*/
			
			.confirmation {
				position: fixed;
				z-index: 2000;
				bottom: -100%;
				width: 100%;
				text-align: center;
				font-size: 12px;
				line-height: 36px;
				background: #fff;
				transition: .3s;
				-webkit-transition: .3s;
			}
			
			.show {
				bottom: 0;
			}
			
			.confirmation .confirmation_title {
				background: #e9e9e9;
				border-bottom: 1px solid #ccc;
				color: #999;
			}
			
			.confirmation_success {
				color: #da2332;
				border-bottom: 1px solid #ccc;
			}
			/*兑换成功*/
			
			.caching {
				background: #303030;
				position: fixed;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				width: 140px;
				text-align: center;
				border-radius: 10px;
				color: #fff;
				padding: 12px 0;
				z-index: 1201;
			}
			
			.caching_img {
				width: 40%;
				margin: 0 auto 10px;
			}
			
			.caching_img img {
				vertical-align: middle;
				width: 100%;
			}
		</style>
	</head>

	<body>
		<div id="integralmall" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title">积分商品</h1>
			</header>
			<div class="mui-content">
				<div class="img">
					<img v-lazy="imgCommonUrl + details.prodImage" data-preview-src="" data-preview-group="1" />
				</div>
				<div class="shop_data">
					<div>
						<div>商品名称</div>
						<div>{{details.name}}</div>
					</div>
					<div>
						<div>市场价格</div>
						<div class="price">¥{{details.price}}</div>
					</div>
					<div>
						<div>消耗积分</div>
						<div class="integral">
							<div>{{details.exchangeIntegral}}</div>
						</div>
					</div>
					<div>
						<div>兑换数量</div>
						<div class="num">
							<div @tap="val < details.stock ? val++:''">
								<div>+</div>
							</div>
							<div class="input"><input type="tel" v-model="val" /></div>
							<div @tap="val>1 ? val-- :''">
								<div>-</div>
							</div>
						</div>
					</div>
					<div>
						<div>剩余数量</div>
						<div>{{details.stock}}件</div>
					</div>
				</div>
				<!--<div class="shop_details">
					<div class="shop_details_title">图文详情</div>
					<div class="shop_details_list">
						<div>产品结构</div>
						<div>其他</div>
					</div>
				</div>-->
				<div v-html="details.prodDesc" class="prodDesc">

				</div>
			</div>

			<div class="caching" v-show="confirAlert">
				<div class="caching_img">
					<img src="../../images/clear_success.png" />
				</div>
				<div>兑换成功</div>
			</div>

			<div class="confirmation" :class="{show:showMask}">
				<div class="confirmation_title">确定要兑换此商品？</div>
				<div class="confirmation_success" @tap="confirm">确定</div>
				<div @tap="cancel">取消</div>
			</div>
			<div class="footer" @tap="exchange">
				<button type="button" class="mui-btn mui-btn-danger">立即兑换</button>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/mui.zoom.js"></script>
		<script src="../../js/libs/mui.previewimage.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/libs/vue-lazyload.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.previewImage();

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var id = self.parameter

				Vue.use(VueLazyload, {
					preLoad: 1.3,
					error: '../../images/loadImg/advert_one_max.png',
					loading: '../../images/loadImg/advert_one_max.png'
				});
				var swith = false
				var mask = mui.createMask(callback); //callback为用户点击蒙版时自动执行的回调；
				var integralmall = new Vue({
					el: '#integralmall',
					data: {
						imgCommonUrl: common.imageUrl,
						details: '',
						val: 1,
						confirAlert: false,
						showMask: false,
						id: id
					},
					watch: {
						val: function(news, old) {
							if(this.details.stock < news) {
								this.val = this.details.stock
							} else if(news == '') {
								this.val = 1
							}
						}
					},
					methods: {
						exchange: function(data) {
							this.showMask = true
							mask.show()
						},
						cancel: function() {
							mask.close()
						},
						confirm: function() {
							if(swith) {
								return
							}
							swith = true
							common.ajax('/integral/submitOrder', {
									id: integralmall.id,
									count: integralmall.val
								},
								function(data) {
									swith = false
									if(data.code == 1) {
										integralmall.confirAlert = true
										mask.close()
										setTimeout(function() {
											integralmall.confirAlert = false
										}, 2000)

										var list = plus.webview.getWebviewById('../my/myintegral.html')
										mui.fire(list, 'myintegral');
									} else {
										mask.close()
										if(data.resultMsg) {
											common.toast(data.resultMsg)
										}
									}
								})
						}
					}
				})

				common.ajax('/integral/prod/view/' + integralmall.id, {

				}, function(data) {
					if(data.code == 1) {
						console.log(data)
						integralmall.details = data.data

						integralmall.$nextTick(function() {
							$.each($(".prodDesc").find('img'), function(i, a) {
								$(".prodDesc").find('img').eq(i).attr({
									'data-preview-group': 'mian',
									'data-preview-src': ''
								})
							})
						})

					} else {
						if(data.resultMsg) {
							common.toast(data.resultMsg)
						}
					}
				}, false, 'get')

				function callback() {
					integralmall.showMask = ''
				}
			})
		</script>
	</body>

</html>